<template>
  <div class="thirdlogin">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <div class="warpper">
      <div class="item" v-for="(item, index) in thirdlogin" :key="index">
        <el-row type="flex" align="middle" v-if="item.open == 1">
          <img :src="img[item.key]" alt />
          <div class="title">{{ item.bind ? '已绑定' : '绑定' }}{{ text[item.key] }}账号</div>
          <el-button size="mini" plain v-if="item.bind" @click="handleDeleteBind(item)"
            >解绑</el-button
          >
          <el-button size="mini" plain v-else @click="handleBind(item)">绑定</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import { mapState } from 'vuex'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/profile/my_account',
          title: '修改密码'
        },
        {
          path: '/my/profile/payPwd',
          title: '支付密码'
        },
        {
          path: '/my/profile/thirdlogin',
          title: '第三方绑定'
        }
      ],
      thirdlogin: [],
      img: {
        weixin: require('@/assets/images/public/wechat.png'),
        qq: require('@/assets/images/public/qq.png'),
        sina: require('@/assets/images/public/weibo.png')
      },
      text: {
        weixin: '微信',
        qq: 'QQ',
        sina: '微博'
      }
    }
  },
  computed: {
    ...mapState({
      getGlobThirdLoginConfig: state => state.projectSetting.globThirdLoginConfig
    }),
    routePath() {
      return this.$route.path
    }
  },
  mounted() {
    this.handlethirdlogin()
  },
  methods: {
    handlethirdlogin() {
      this.$api.getConfigThirdloginBind(res => {
        this.thirdlogin = res.data
      })
    },
    // 绑定
    handleBind(item) {
      if (item.key) {
        window.location.href = this.getGlobThirdLoginConfig[item.key]
      }
    },
    // 解绑
    handleDeleteBind(item) {
      this.$router.push({
        path: '/my/profile/thirdlogindel',
        query: {
          key: item.key
        }
      })
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.thirdlogin {
  .warpper {
    .item {
      margin-bottom: 30px;
      .title {
        flex-grow: 1;
        margin-left: 16px;
        font-size: 14px;
        color: $text-color-import;
      }
    }
  }
}
</style>
